<template>
<div>
<!--  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">-->
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>美多商城-注册</title>

  </head>
  <body>
  <div class="register_con">
    <div class="l_con fl">
      <a href="index.html" class="reg_logo"><img src="../../../static/images/logo.png"></a>
      <div class="reg_slogan">商品美 · 种类多 · 欢迎光临</div>
      <div class="reg_banner"></div>
    </div>

    <div class="r_con fr">
      <div class="reg_title clearfix">
        <h1>用户注册</h1>
        <a href="login.html">登录</a>
      </div>
      <div class="reg_form clearfix">
        <form method="post" class="register_form" @submit.prevent="sub">
          <ul>
            <li>
              <label>用户名:</label>
              <input type="text" name="user_name" id="user_name" v-model="form.username" @blur="checkusername">
              <span class="error_tip">{{error.username}}</span>
            </li>
            <li>
              <label>密码:</label>
              <input type="password" name="pwd" id="pwd"  v-model="form.password" @blur="checkpassword">
              <span class="error_tip">{{ error.password }}</span>
            </li>
            <li>
              <label>确认密码:</label>
              <input type="password" name="cpwd" id="cpwd" v-model="form.password1" @blur="checkpassword1">
              <span class="error_tip">{{ error.password1 }}</span>
            </li>
            <li>
              <label>手机号:</label>
              <input type="text" name="phone" id="phone" v-model="form.mobile" @blur="checkmobile">
              <span class="error_tip">{{ error.mobile }}</span>
            </li>
            <li>
              <label>图形验证码:</label>
              <input type="text" name="pic_code" id="pic_code" class="msg_input">
              <img src="../../../static/images/pic_code.jpg" alt="图形验证码" class="pic_code">
              <span class="error_tip">请填写图形验证码</span>
            </li>
            <li>
              <label>短信验证码:</label>
              <input type="text" name="msg_code" id="msg_code" class="msg_input" v-model="form.codesms">
<!--              <a href="javascript:" class="get_msg_code">获取短信验证码</a>-->
                  <button @click.prevent="getSmsCode" :disabled="flag" class="get_msg_code">{{mes}}</button>
              <span class="error_tip">请填写短信验证码</span>
            </li>
            <li class="agreement">
              <input type="checkbox" name="allow" id="allow" checked="checked">
              <label>同意”美多商城用户使用协议“</label>
              <span class="error_tip">请勾选用户协议</span>
            </li>
            <li class="reg_sub">
              <input type="submit" value="注 册">
            </li>
          </ul>
        </form>
      </div>

    </div>

  </div>

  <div class="footer no-mp">
    <div class="foot_link">
      <a href="#">关于我们</a>
      <span>|</span>
      <a href="#">联系我们</a>
      <span>|</span>
      <a href="#">招聘人才</a>
      <span>|</span>
      <a href="#">友情链接</a>
    </div>
    <p>CopyRight © 2016 北京美多商业股份有限公司 All Rights Reserved</p>
    <p>电话：010-****888    京ICP备*******8号</p>
  </div>
  </body>
  </html>
</div>
</template>

<script>
import '../../../static/css/reset.css'
import '../../../static/css/main.css'
export default {
  name: "Reg",
  data(){
    return{
      form:{},
      error:{username:'',mobile:'',password:'',password1:''},
      flag:false,
      mes:'发送验证码',
      time:60,
    }
  },
  methods:{
    checkusername(){
      let name = this.form.username
      //!.检查是否为空，undefined
      if(name==undefined){
        //alert('必须输入用户名')
        this.error.username='用户名不能为空'
        return false
      }
      //2.验证是否合法
      let reg=/\w{5,10}$/
      if(!reg.test(name)){
        this.error.username='请输入合法的用户名'
        return false
      }
      //验证是否唯一
      this.$axios.post('users/reg/',this.form)
      .then(res=>{
        if(res.data.code==10010){
          this.error.username='用户名不能为空'
          return false
        }
        if(res.data.code==10011){
          this.error.username='请输入合法的用户名'
          return false
        }
        if(res.data.code==10012){
          this.error.username='用户名已存在'
          return false
        }
        this.error.username=''
      })
    },
    //验证密码
    checkpassword(){
      let password = this.form.password
      //验证是否为空
      if (password == undefined || password=='') {
        this.error.password = '密码不能为空'
        return false
      }
      //验证是否合法
      let reg = /\w{5,20}$/
      if (!reg.test(password)) {
        this.error.password = '请输入合法的密码'
        return false
      }
      //验证是否唯一
      this.$axios.post('users/reg/', this.form)
        .then(res => {
          if (res.data.code == 10016) {
            this.error.password = "密码不能为空"
            return false
          }

          if (res.data.code == 10017) {
            this.error.password = '请输入合法的密码'
            return false
          }
          this.error.password = ''
        })
    },
// 确认密码
    checkpassword1() {
      let password1 = this.form.password1
      let password = this.form.password
      if (password1 == undefined) {
        this.error.password1 = '确认密码不能为空'
        return false
      }
      let msg = /\w{5,20}$/
      if (!msg.test(password1)) {
        this.error.password1 = '请输入正确的密码格式'
        return false
      }

      if (password != password1) {
        this.error.password1 = '两次密码输入的不一样'
        return false
      }
      this.$axios.post('users/reg/', this.form)
        .then(res => {
          if (res.data.code == 10020) {
            this.error.password1 = '确认密码不能为空'
            return false
          }
          if (res.data.code == 10021) {
            this.error.password1 = '请输入正确的密码格式'
            return false
          }
          if (res.data.code == 10022) {
            this.error.password1 = '两次输入的密码不正确'
            return false
          }
          this.error.password1 = ''
        })
    },
    checkmobile() {
      //验证手机号
      let mobile = this.form.mobile
      //验证手机号是否为空
      if (mobile == undefined || mobile=='') {
        this.error.mobile = '手机号不能为空'
        return false
      }

      //验证手机号是否合法
      let mreg = /1[3-9]\d{9}$/
      if (!mreg.test(mobile)) {
        this.error.mobile = '请输入合法的手机号'
        return false
      }
      //验证手机号唯一
      this.$axios.post('users/reg/', this.form).then(res => {
        if (res.data.code == 10013) {
          this.error.mobile = "手机号不能为空"
          return false
        }

        if (res.data.code == 10014) {
          this.error.mobile = '请输入合法的手机号'
          return false
        }

        if (res.data.code == 10015) {
          this.error.mobile = '手机号已存在'
          return false
        }
        this.error.mobile = ''
      })
    },
    getSmsCode(){
      //获取手机号
      this.$axios.post('users/sendSms/',{'mobile':this.form.mobile}).then(res=>{
        //成功后开始倒计时,把按钮变成disabled
        if(res.data.code == 200){
          let m = setInterval(() => {
            //time -1
            this.time --
            //按钮变为不能用
            this.flag=true
            //文字发生变化
            this.mes=this.time +'秒以后再操作'
            if(this.time == 0){
              clearInterval(m)
              this.time=60
              this.flag=false
              this.mes='获取短信验证码'
            }

          }, 1000);

        }
      })
    },
    sub(){
      this.checkusername()
      this.checkpassword()
      this.checkpassword1()
      this.checkmobile()
      this.$axios.post('users/reg/',this.form)
      .then(res=>{
        if(res.data.code==10017){
          alert("注册失败")
        }
        else {
          this.$router.push({"path":'denglu'})
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
